<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li><a href="#/home">首页</a></li>
    <li><a href="#/about">关于我们</a></li>
  </ul>
  <div id="body"></div>
  
  <script>
    const Home = '<div>home</div>'
    const About = '<div>about</div>'

    // $('li').on('click', function() {
    //   let to = $(this).attr('to')
    //   if (to === '/home') {
    //     $('#body').html(Home)
    //   } else {
    //     $('#body').html(About)
    //   }
    // })
    $(window).on('hashchange', () => {
      let hash = location.hash

      if (hash === '#/home') {
        $('#body').html(Home)
      } else {
        $('#body').html(About)
      }
    })
  </script>
</body>
</html>